<template>
    <div class="g-emall_wrap">
	    <div class="g-emall_topbar">
	        <header class="header-default">
	            <span class="go-back"></span>
	            <h2>壹键哥-交易详情</h2>
	        </header>
	    </div>
	    <div class="pay-visitor-c">
	      <div class="visc-top success">
	        <span></span>付款成功
	      </div>
	      <div class="visc-top error" style="display: none">
	        <span></span>付款失败
	      </div>
	      <div class="visc-info">
	        <p class="name">{{resultData.storeName}}</p>
	        <p class="pricev">¥ {{resultData.amount}}</p>
	        <div class="text">
	          <p>商品<span>{{resultData.businessCategoryName}}-快捷支付</span></p>
	          <p>交易时间<span>{{orderTime|dateTimeDate}}</span></p>
	          <p>支付方式<span>{{resultData.pay}}</span></p>
	          <p>订单编号<span>{{resultData.salesOrderCode}}</span></p>
	        </div>
	      </div>
	      <p class="next" @click="openGft"><span>点击下载壹键哥APP，享受更多优惠</span></p>
          <open-app ref="openApp"></open-app>
	      <div class="visc-bottom">
	        <!-- <p><span>保存交易详情</span></p> -->
	        <p class="msg" >如有需要请自行截图保存支付信息至您的手机</p>
	      </div>
	    </div>

	  </div>
</template>
<script>
import openApp from './OpenApp'
export default{
    data () {
        return {
            orderTime: null,
            resultData:{}
        }
    },
    components:{
        openApp
    },
    created() {
        this.resultData = this.$route.query
		this.orderTime = new Date()
    },
    methods: {
        openGft(){
            this.$refs.openApp.openApp()
		},
		snap(){
			let  constraints =  {
				video: {
					mandatory: {
					maxWidth: window.screen.width,
					maxHeight: window.screen.height,
					maxFrameRate: 30,
					chromeMediaSource: 'screen'
				}
			}
			}
			//console.log(window.location.href)
			navigator.webkitGetUserMedia(constraints, function(){
					vd.src = webkitURL.createObjectURL(window.location.href);
					vd.play();
			},function(err){
					console.log('error',err);
			})

		}
    }
}
</script>
<style scoped>
.g-emall_wrap{background: #f2f2f2;height: 100vh}
.g-emall_wrap.white{background: #fff;height: 100vh}
header h2{background: #09bebf;text-align: center;color: #fff;height: 1rem;font-size: .42rem;line-height: 1rem;font-weight: 100}
.go-back{display: inline-block;position: absolute;left:0;top: 0;width: 1rem;height: 1rem;background:url('../assets/images/vp-08.png') center no-repeat;background-size: 80%;}
.vis-img{padding: 1rem 0 .2rem 0;text-align: center;}
.vis-img img{width: 3rem;height: 3rem}
.vis-title{text-align: center;font-size: .36rem;color: #333;line-height: 2.4}
.vis-title span{color: #CC0000}

.vis-info{padding: 0 .1rem;margin-top: 1.2rem}
.vis-info .input{border-bottom: #ddd solid 1px;font-size: .32rem;padding: .2rem 0}
.vis-info button{background: #6bd8d9;width: 100%;height: 1rem;line-height: 1rem;border: none;color: #fff;font-size: .38rem;margin-top: .6rem;border-radius: .06rem}
.vis-info button:active{background: #20b4b4;}
.vis-info .msg{text-align: center;font-size: .32rem;color: #999;line-height: 3;}
.vis-info .name{display: inline-block;width: 3.2rem;text-align: right;font-size: .36rem;color: #333;padding-right: .2rem}
.vis-info input{font-size: .36rem;}

.vis-bottom{position: fixed;bottom: .4rem;text-align: center;width: 100%;display:flex;justify-content: space-around;}
.vis-bottom span{display: inline-block;background: #ff9966;color: #fff;padding: .2rem .4rem;line-height: 1;font-size: .36rem}



.visc-top{padding-top: 0rem;line-height: 3rem;font-size: .5rem;text-align: center;color: #09bebf}
.visc-top.error{color: #ce1b00}
.visc-top span{display: inline-block;vertical-align: middle;width: 1rem;height: 1rem;margin-top: -.1rem;margin-right: .2rem;background: url('../assets/images/vp-01.png') center no-repeat;background-size: 100% 100%}
.visc-top.error span{background: url('../assets/images/vp-02.png') center no-repeat;background-size: 100% 100%}

.visc-info{padding-top: .6rem;background: #fff}
.visc-info .name{text-align: center;font-size: .38rem;line-height: 1;color: #333}
.visc-info .pricev{text-align: center;font-size: .8rem;line-height: 2;color: #333}
.visc-info .text{overflow: hidden;border-top: #dcdcdc solid 1px;margin: 0 .2rem;margin-top: .3rem;color: #333;padding: .2rem 0}
.visc-info .text p{line-height: 1rem;font-size: .38rem}
.visc-info .text span{float: right;font-size: .38rem}

.next{text-align: center;padding-top: .6rem}
.next span{display: inline-block;min-width: 6rem;height: .8rem;line-height: .8rem;background: #09bebf;color: #fff;font-size: .36rem;padding: 0 .2rem}

.visc-bottom{position: fixed;bottom: .3rem;text-align: center;width: 100%;}
.visc-bottom span{display: inline-block;background: #ff9966;color: #fff;padding: .2rem .4rem;margin: 0 .3rem;line-height: 1;font-size: .36rem}
.visc-bottom .msg{text-align: center;font-size: .32rem;color: #999;line-height: 3}
</style>

